<template>
  <!-- <div class="video-space-line"></div> -->
  <div class="video-item">
    <img class="video-img" v-if="thumbnail" />
    <div class="video-img-place" v-else>
      <img class="video-img" src="@/assets/imgs/video-bg.jpg" />
      <div class="video-place-text">
        <div class="place-title">{{ title }}</div>
        <!-- <div class="place-sub-title">{{ startTime }}</div> -->
      </div>
    </div>
    <div class="video-content">
      <div class="video-title overflow-text">{{ title }}</div>
      <div class="sub-title">
        <slot name="subtitle"></slot>
      </div>
      <div class="content-foot">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  thumbnail: {
    type: String,
    default: ''
  },
  startTime: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  isLive: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="less" scoped src="@/styles/video-item.less"></style>
